<template>
  <div>
    <!-- 按钮 -->
    <el-row style="margin-bottom: 20px">
      <!-- 左边 -->
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="addMsbd">新增按钮</el-button>
          <el-button type="success">高级搜索</el-button>
        </div>
      </el-col>
      <!-- 右边 -->
      <el-col :span="6">
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
        </el-input>
      </el-col>
    </el-row>

    <!-- table -->
    <el-table :data="msbdTableData" border style="width: 100%" max-height="600">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="title" label="问题" width="150"></el-table-column>
      <el-table-column prop="content" label="答案" width="1000"></el-table-column>
      <el-table-column prop="author" label="作者" width="120"></el-table-column>
      <el-table-column prop="date" label="日期" sortable width="200"></el-table-column>
      <el-table-column prop="time" label="用时" sortable width="120"></el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        :formatter="(row) => classifyMap[row.cid]"
        width="120"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="224">
        <template slot-scope="scope">
          <el-button type="info" size="small" @click="showDetails(scope.row)"
            >详情</el-button
          >
          <el-button type="warning" size="small" @click="updateMsbd(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="delMsbd(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      :title="title + '面试宝典信息'"
      :visible.sync="drawer"
      :wrapperClosable="false"
      size="50%"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        :disabled="disabledForm === 'showdetails'"
        style="width: 80%,margin: auto;"
      >
        <el-form-item label="问题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="form.author" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option
              v-for="(item, index) in classify"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用时">
          <el-select v-model="form.time" placeholder="请选择用时">
            <el-option label="0" value="0"></el-option>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <mavonEditor
            :editable="disabledForm === 'showdetails' ? false : true"
            style="max-height: 300px; overflow-y: scroll"
            v-model="form.content"
          >
          </mavonEditor>
        </el-form-item>
        <el-form-item> </el-form-item>
      </el-form>
      <footer class="form_footer">
        <el-button type="primary" @click="saveMsbd" v-if="disabledForm != 'showdetails'"
          >提交</el-button
        >
        <el-button @click="cal">取消</el-button>
      </footer>
    </el-drawer>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import { mapGetters, mapState, mapActions } from "vuex";

export default {
  layout: "main",
  data() {
    return {
      title: "新增",
      input3: "",
      select: "",
      drawer: false,
      form: {
        author: "situ",
      },
    };
  },
  fetch({ $axios, store }) {
    store.dispatch("msbd/renderMsbdTable");
    store.dispatch("classify/getClaccifyData", $axios);
  },
  computed: {
    ...mapGetters("classify", ["classifyMap"]),
    ...mapState("msbd", ["msbdTableData", "classify"]),
    ...mapState("question", ["disabledForm"]),
  },
  methods: {
    ...mapActions("msbd", ["saveMsbdData", "delteMsbdData", "updateMsbdData"]),
    // 详情
    showDetails(row) {
      this.title = "详情";
      this.drawer = true;
      this.form = { ...row, author: row.author };
      this.$store.commit("question/SET_STATUS", "showdetails");
    },
    // 修改
    updateMsbd(row) {
      this.title = "修改";
      this.drawer = true;
      this.form = { ...row, author: row.author };
      this.$store.commit("question/SET_STATUS", "update");
    },
    // 删除
    async delMsbd(row) {
      if (confirm("你确定删除？")) {
        await this.delteMsbdData(row);
        this.$message({
          showClose: true,
          message: "msbd删除成功 ",
          type: "success",
        });
      }
    },
    // 新增
    async saveMsbd() {
      console.log(this.form);
      if (this.form.id) {
        this.updateMsbdData(this.form);
      } else {
        await this.saveMsbdData(this.form);
      }
      this.form = {
        author: "situ",
      };
      this.drawer = false;
    },
    addMsbd() {
      this.drawer = true;
      this.$store.commit("question/SET_STATUS", "add");
    },
    cal() {
      this.drawer = false;
      this.form = {
        author: "situ",
      };
    },
  },
  components: {
    mavonEditor,
  },
};
</script>

<style>
.el-drawer.rtl {
  overflow: scroll;
}
.form_footer {
  padding-left: 80px;
}
.el-drawer__header {
  color: #333;
  font-size: 22px;
  text-align: center;
}
</style>
